
	.naver {

		margin: @naver-margin;

		&,
		& *,
		& *:before,
		& *:after {
			box-sizing: border-box;
		}

		// .naver-handle

		&-handle {
			width: 100%;

			background: @naver-handle-background;
			border: @naver-border-size solid @naver-border-color;
			color: @naver-handle-text-color;
			cursor: pointer;
			display: none;
			font-size: @naver-handle-font-size;
			margin: 0;
			padding: @naver-handle-padding;
			position: relative;
			user-select: none;

			&:after {
				height: @naver-icon-height;
				width: @naver-icon-width;

				position: absolute;
				top: 0;
				right: @naver-icon-offset;
				bottom: 0;

				background: @naver-icon-color;
				box-shadow:
					0  (@naver-icon-height + 2) 0 @naver-icon-color,
					0 -(@naver-icon-height + 2) 0 @naver-icon-color;
				content: '';
				display: block;
				margin: auto 0;
			}
		}

		&.open &-handle:after {
			width: @naver-icon-close-size;
			height: @naver-icon-close-size;

			background: transparent;
			border: none;
			box-shadow: none;
			color: @naver-icon-color;
			content: "\00d7";
			font-size: @naver-icon-close-font-size;
			font-weight: 700;
			line-height: @naver-icon-close-size;
			text-align: center;
		}

		// .naver-wrapper

		&-wrapper {
			border: none;
			height: auto;
			margin: 0;
			padding: 0;
		}

		// .naver-container

		&-container:after {
			clear: both;
			content: ".";
			display: block;
			height: 0;
			line-height: 0;
			visibility: hidden;
		}

		// .enabled

		&.enabled &-handle {
			display: block;
		}

		&.enabled &-wrapper {
			height: 0px;
			overflow: hidden;
		}

		&.enabled &-container {
			background: @naver-container-background;
			border: @naver-container-border-size solid @naver-container-border-color;
			border-width: 0 1px 1px;
		}
	}